import { defineComponent } from 'vue';
import { QuestionType } from '../../question/typing';
import './style.css';

const questionTypes: Array<QuestionType> = [
  {
    id: 1,
    order: 1,
    mode: 'design',
    type: 'single',
    name: '单选题',
  },
  {
    id: 2,
    order: 2,
    mode: 'design',
    type: 'multiple',
    name: '多选题',
  },
  {
    id: 3,
    order: 3,
    mode: 'design',
    type: 'map',
    name: '地图题',
  },
  {
    id: 4,
    order: 4,
    mode: 'design',
    type: 'scale',
    name: '量表题',
  },
  {
    id: 5,
    order: 5,
    mode: 'design',
    type: 'answer',
    name: '简答题',
  },
  {
    id: 6,
    order: 6,
    mode: 'design',
    type: 'paragraph',
    name: '段落说明',
  },
  {
    id: 7,
    order: 7,
    mode: 'design',
    type: 'paging',
    name: '分页栏',
  },
  {
    id: 8,
    order: 8,
    mode: 'design',
    type: 'startPage',
    name: '开始页',
  },
  {
    id: 9,
    order: 9,
    mode: 'design',
    type: 'endPage',
    name: '结束页',
  },
];

export default defineComponent({
  emits: ['questionDblClick'],
  setup(_props, { emit }) {
    const questionTypeDblClick = (questionType: QuestionType) => {
      emit('questionDblClick', questionType);
    };

    return () => {
      return (
        <div class="design-question-types-panel">
          {questionTypes.map(eachQuestionType => {
            return (
              <div
                class="design-question-type"
                key={`questionType-${eachQuestionType.id}`}
                onDblclick={() => questionTypeDblClick(eachQuestionType)}
              >
                {eachQuestionType.name}
              </div>
            );
          })}
        </div>
      );
    };
  },
});
